<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #d6e0ff 0%, #e0c3fc 100%);
        }
        .login-bg {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.13);
            padding: 36px 30px 24px 30px;
            min-width: 340px;
            max-width: 90vw;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .login-title {
            text-align: center;
            color: #2d2d4b;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .login-subtitle {
            text-align: center;
            color: #888;
            font-size: 15px;
            margin-bottom: 22px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 18px;
        }
        .form-group label {
            margin-bottom: 6px;
            color: #3a7ca5;
            font-size: 15px;
            font-weight: 500;
        }
        .input-wrapper {
            display: flex;
            align-items: center;
            background: #f7f7fb;
            border-radius: 6px;
            border: 1.5px solid #e0e0ef;
            padding: 0 10px;
            transition: border-color 0.2s;
        }
        .input-wrapper:focus-within {
            border-color: #b39ddb;
        }
        .input-icon {
            font-size: 18px;
            color: #b39ddb;
            margin-right: 6px;
        }
        .ipt {
            border: none;
            background: transparent;
            padding: 10px 0;
            font-size: 16px;
            outline: none;
            flex: 1;
        }
        .msg {
            min-height: 18px;
            font-size: 13px;
            margin-top: 3px;
            color: #e74c3c;
            transition: color 0.2s;
        }
        .form-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
        }
        .remember-me {
            font-size: 14px;
            color: #888;
            user-select: none;
        }
        .forgot-link {
            font-size: 14px;
            color: #b39ddb;
            text-decoration: none;
            transition: color 0.2s;
        }
        .forgot-link:hover {
            color: #7e57c2;
        }
        .buttonContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .btn1 {
            border: none;
            border-radius: 6px;
            padding: 10px 0;
            width: 100%;
            background: linear-gradient(90deg, #b39ddb 0%, #a18cd1 100%);
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(163, 148, 255, 0.08);
            transition: background 0.2s, transform 0.1s;
            letter-spacing: 2px;
        }
        .btn1:hover, .btn1:focus {
            background: linear-gradient(90deg, #a18cd1 0%, #b39ddb 100%);
            transform: translateY(-2px) scale(1.03);
        }
        .register-tip {
            text-align: center;
            color: #888;
            font-size: 14px;
            margin-top: 8px;
        }
        .register-link {
            color: #b39ddb;
            text-decoration: none;
            margin-left: 2px;
            transition: color 0.2s;
        }
        .register-link:hover {
            color: #7e57c2;
        }
        @media (max-width: 480px) {
            .login-card {
                padding: 18px 6vw 18px 6vw;
                min-width: unset;
            }
            .btn1 {
                font-size: 15px;
            }
        }
        #particles-bg {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: auto;
        }
        .login-bg, .login-card {
            position: relative;
            z-index: 1;
        }
    </style>
    <script>
        function checkUsername(){
            //定义正则表达式
            var reg=/^[\u4e00-\u9fa5a-zA-Z0-9_]{2,16}$/;
            //获得用户输入的信息
            var usernameInput=document.getElementById("usernameInput")
            var username=usernameInput.value
            //获得格式提示的框
            var usernameMsg=document.getElementById("usernameMsg")
            //格式有误时
            if(!reg.test(username)){
                usernameMsg.innerText="用户名格式有误"
                return false
            }
            usernameMsg.innerText="用户名格式正确"
            return true;
        }

        function checkUserPwd(){
            var reg=/^[0-9]{6,10}$/
            var userPwdInput=document.getElementById("userPwdInput")
            var userPwd=userPwdInput.value

            var userPwdMsg=document.getElementById("userPwdMsg")
            if(!reg.test(userPwd)){
                userPwdMsg.innerText="密码格式有误"
                return false
            }
            userPwdMsg.innerText="密码格式正确"
                return true
        }

        function checkForm(){//表单提交时校验用户名和密码格式
            var f1=checkUserPwd()
            var f2=checkUsername()

            return f1&&f2
        }
    </script>
</head>
<body>
    <div id="particles-bg"></div>
    <div class="login-bg">
        <div class="login-card">
            <h2 class="login-title">欢迎回来</h2>
            <div class="login-subtitle">请登录您的账号</div>
            <form method="post" action="/user/login" onsubmit="return checkForm()">
                <div class="form-group">
                    <label for="usernameInput">用户名</label>
                    <div class="input-wrapper">
                        <span class="input-icon">👤</span>
                        <input class="ipt" type="text" id="usernameInput" name="username" placeholder="请输入用户名" onblur="checkUsername()">
                    </div>
                    <span id="usernameMsg" class="msg"></span>
                </div>
                <div class="form-group">
                    <label for="userPwdInput">密码</label>
                    <div class="input-wrapper">
                        <span class="input-icon">🔒</span>
                        <input class="ipt" type="password" id="userPwdInput" name="userPwd" placeholder="请输入密码" onblur="checkUserPwd()">
                    </div>
                    <span id="userPwdMsg" class="msg"></span>
                </div>
                <div class="form-row">
                    <label class="remember-me"><input type="checkbox" name="remember"> 记住我</label>
                    <a href="#" class="forgot-link">忘记密码？</a>
                </div>
                <div class="buttonContainer">
                    <input class="btn1" type="submit" value="登 录">
                </div>
            </form>
            <div class="register-tip">还没有账号？<a href="/regist.html" class="register-link">立即注册</a></div>
        </div>
    </div>
    <script src="particles.min.js"></script>
    <script>
particlesJS("particles-bg", {
  "particles": {
    "number": { "value": 40, "density": { "enable": true, "value_area": 800 } },
    "color": { "value": "#ffffff" },
    "shape": { "type": "circle" },
    "opacity": { "value": 0.7, "random": true },
    "size": { "value": 8, "random": true },
    "move": {
      "enable": true,
      "speed": 1.5,
      "direction": "top",
      "straight": false,
      "out_mode": "out"
    }
  },
  "interactivity": {
    "events": {
      "onhover": { "enable": true, "mode": "bubble" },
      "onclick": { "enable": true, "mode": "repulse" }
    },
    "modes": {
      "bubble": { "distance": 120, "size": 12, "duration": 2, "opacity": 0.6 },
      "repulse": { "distance": 100, "duration": 0.4 }
    }
  },
  "retina_detect": true
});
</script>
</body>
</html>